<template>
  <Dialog :title="'应收款信息'" style="width:70%" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
     <el-row>
       <el-col :span="12">
         <el-form-item label="合同名称" prop="contractName">
           <el-input disabled v-model="formData.contractArchiveInfo.contractName" placeholder="" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="合同编号" prop="contractCode">
           <el-input disabled v-model="formData.contractArchiveInfo.contractCode" placeholder="" />
         </el-form-item>
       </el-col>
     </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="contractStartTime">
            <el-date-picker disabled  style="width:100%"
              v-model="formData.contractArchiveInfo.contractStartTime"
              type="date"
              value-format="x"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="contractEndTime">
            <el-date-picker disabled  style="width:100%"
              v-model="formData.contractArchiveInfo.contractEndTime"
              type="date"
              value-format="x"
              placeholder=""
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户名称" prop="customerName">
            <el-input disabled v-model="formData.contractArchiveInfo.customerName" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="应收金额" prop="receiveMoney">
            <el-input disabled  v-model="formData.receiveMoney" placeholder="">
              <template #append>元(小写)</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应收日期" prop="receiveDate">
            <el-date-picker disabled  style="width:100%"
              v-model="formData.receiveDate"
              type="date"
              value-format="x"
              placeholder=""
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="类型" prop="contractType">
            <el-select disabled v-model="formData.contractArchiveInfo.contractType" placeholder="">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.BIZ_CONTRACT_ARCHIVE_CONTRACT_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期数" prop="instalmentCount">
            <el-input disabled v-model="formData.instalmentCount" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="管理单元" prop="serviceUnitName">
            <el-input disabled v-model="formData.contractArchiveInfo.serviceUnitName" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款负责人" prop="recorderName">
            <el-input v-model="formData.recorderName" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收款内容" prop="content">
            <el-input v-model="formData.content" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否坏账" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio value="3" >是</el-radio>
              <el-radio value="0" >否</el-radio>
            </el-radio-group>
<!--            {{formData.status == '3' ? '是': '否'}}-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="formData.status == '3'" label="坏账日期" prop="badDebtDate">
            <el-date-picker style="width:100%"
              v-model="formData.badDebtDate"
              type="date"
              value-format="x"
              placeholder="选择坏账日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row  v-if="formData.status == '3'">
        <el-col :span="24">
          <el-form-item label="坏账原因" prop="badDebtReason">
            <el-input v-model="formData.badDebtReason" placeholder="请输入坏账原因" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开票状态" prop="taxStatus">
            <el-select v-model="formData.taxStatus" placeholder="请选择开票状态">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.BIZ_CONTRACT_TAX_STATUS)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="开票资料" prop="attachmentUrl">
            <UploadFile :file-type="['doc', 'xls', 'ppt', 'txt', 'pdf','png', 'jpg', 'jpeg']" v-model="formData.taxFile" ref="taxFileRef" class="min-w-80px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="签收回执" prop="attachmentUrl">
            <UploadFile :file-type="['doc', 'xls', 'ppt', 'txt', 'pdf','png', 'jpg', 'jpeg']" v-model="formData.signFile"  ref="signFileRef"  class="min-w-80px" />
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-form-item label="合同档案id" prop="contractArchiveId">-->
<!--        <el-input v-model="formData.contractArchiveId" placeholder="请输入合同档案id" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="分期数" prop="instalmentCount">-->
<!--        <el-input v-model="formData.instalmentCount" placeholder="请输入分期数" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="收款状态" prop="status">-->
<!--        <el-radio-group v-model="formData.status">-->
<!--          <el-radio-->
<!--            v-for="dict in getStrDictOptions(DICT_TYPE.BIZ_CONTRACT_IN_STATUS)"-->
<!--            :key="dict.value"-->
<!--            :label="dict.value"-->
<!--          >-->
<!--            {{ dict.label }}-->
<!--          </el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="收款日期" prop="receiveDate">-->
<!--        <el-date-picker-->
<!--          v-model="formData.receiveDate"-->
<!--          type="date"-->
<!--          value-format="x"-->
<!--          placeholder="选择收款日期"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="收款金额" prop="receiveMoney">-->
<!--        <el-input v-model="formData.receiveMoney" placeholder="请输入收款金额" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="发票号" prop="receiptCode">-->
<!--        <el-input v-model="formData.receiptCode" placeholder="请输入发票号" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="已收金额" prop="alreadyReceiveMoney">-->
<!--        <el-input v-model="formData.alreadyReceiveMoney" placeholder="请输入已收金额" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="对应服务期" prop="serviceTerm">-->
<!--        <el-input v-model="formData.serviceTerm" placeholder="请输入对应服务期" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="备注" prop="remark">-->
<!--        <el-input v-model="formData.remark" placeholder="请输入备注" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="是否生效" prop="isValid">-->
<!--        <el-input v-model="formData.isValid" placeholder="请输入是否生效" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="经手人" prop="recorderName">-->
<!--        <el-input v-model="formData.recorderName" placeholder="请输入经手人" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="收款内容" prop="content">-->
<!--        <el-input type="textarea" v-model="formData.content" placeholder="请输入经手人" />-->
<!--&lt;!&ndash;        <Editor v-model="formData.content" height="150px" />&ndash;&gt;-->
<!--      </el-form-item>-->

<!--      <el-form-item label="开票资料" prop="attachmentUrl">-->
<!--        <UploadFile :file-type="['doc', 'xls', 'ppt', 'txt', 'pdf','png', 'jpg', 'jpeg']" v-model="formData.taxFile" ref="taxFileRef" class="min-w-80px" />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="签收回执" prop="attachmentUrl">-->
<!--        <UploadFile :file-type="['doc', 'xls', 'ppt', 'txt', 'pdf','png', 'jpg', 'jpeg']" v-model="formData.signFile"  ref="signFileRef"  class="min-w-80px" />-->
<!--      </el-form-item>-->
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { ContractArchiveReceiveRecordApi, ContractArchiveReceiveRecord } from '@/api/biz/receivables'
import { formatDate } from '@/utils/formatTime'
/** 应收款管理 表单 */
defineOptions({ name: 'ContractArchiveReceiveRecordForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  contractArchiveId: undefined,
  instalmentCount: undefined,
  status: '0',
  receiveDate: undefined,
  receiveMoney: undefined,
  receiptCode: undefined,
  alreadyReceiveMoney: undefined,
  serviceTerm: undefined,
  remark: undefined,
  badDebtReason: undefined,
  isValid: undefined,
  badDebtDate: undefined,
  recorderName: undefined,
  content: undefined,
  taxStatus: undefined,
  contractArchiveInfo: {
    contractCode: undefined,
    contractName: undefined,
    contractStartTime: undefined,
    contractEndTime: undefined,
    customerName: undefined,
    serviceUnitName: undefined
  },
})
const formRules = reactive({
  badDebtDate: [{ required: true, message: '坏账日期不能为空', trigger: 'blur' }],
  badDebtReason: [{ required: true, message: '坏账原因不能为空', trigger: 'blur' }],

})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ContractArchiveReceiveRecordApi.getContractArchiveReceiveRecord(id)
      if ( formData.value.signFile) {
        formData.value.signFile = JSON.parse(formData.value.signFile);
      }
      if (formData.value.taxFile ) {
        formData.value.taxFile = JSON.parse(formData.value.taxFile);
      }
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ContractArchiveReceiveRecord
    if ( Array.isArray(data.signFile)) {
      data.signFile = JSON.stringify(data.signFile);
    }
    if ( Array.isArray(data.taxFile) ) {
      data.taxFile = JSON.stringify(data.taxFile);
    }
    if (formType.value === 'create') {
      await ContractArchiveReceiveRecordApi.createContractArchiveReceiveRecord(data)
      message.success(t('common.createSuccess'))
    } else {
      await ContractArchiveReceiveRecordApi.updateContractArchiveReceiveRecord(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    contractArchiveId: undefined,
    instalmentCount: undefined,
    status: '0',
    receiveDate: undefined,
    receiveMoney: undefined,
    receiptCode: undefined,
    alreadyReceiveMoney: undefined,
    serviceTerm: undefined,
    remark: undefined,
    badDebtReason: undefined,
    isValid: undefined,
    badDebtDate: undefined,
    recorderName: undefined,
    content: undefined,
    taxStatus: undefined,
    contractArchiveInfo: {
      contractCode: undefined,
      contractName: undefined,
      contractStartTime: undefined,
      contractEndTime: undefined,
      customerName: undefined,
      serviceUnitName: undefined
    },
  }
  formRef.value?.resetFields()
}
</script>
